<template>
	<view>
        <view class="" :style="{height:heightBottom}">
            
        </view>
		<view class="tab-bar" :style="{height:tabBarHeight+'px'}">
			<view class="tab-bar-border"></view>
			<view v-for="(item,index) in tabBar.list" :key="index" class="tab-bar-item"
				@click="tbs_SwitchTab(index)">
				<image class="cover-image" :src="selected===index?item.selectIconPath:item.iconPath">
				</image>
				<view class="cover-view"
					:style="{color: selected === index ? tabBar.selectedColor : tabBar.color}">
					{{item.text}}
				</view>
                
                <view class="messageTag" v-if="item.count>0">
                    {{item.count>100?'...':item.count}}
                </view>
			</view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync() // 系统信息
	let isiOS = systemInfo.system.indexOf('iOS') > -1 // 判断是否为 iOS

	export default {
		props: {
            value: {
                type: Number,
            },
			tabBar: Object // tabBar数据对象
		},
		data() {
			return {
				tabBarHeight: 0, // tabBar 的高度
				selected: 0, // 当前选择的 tabBar 的 index，从 0 开始
                heightBottom: '0px',
			}
		},
        
		created() {
			let navigationBarHeight
			if (!isiOS) {
				this.tabBarHeight = 54 // 非 iOS 系统 tabBar 高度的数字，单位为 px
				navigationBarHeight = 48
			} else { // ios
				this.tabBarHeight = 48 // iOS 系统 tabBar 高度的数字，单位为 px
				navigationBarHeight = 44
			}
			this.pagesHeight = systemInfo.safeArea.height - navigationBarHeight - this.tabBarHeight

			let ret = {}
			ret.tabBarHeight = this.tabBarHeight
			ret.pagesHeight = this.pagesHeight
			this.$emit('tabBarCreateEvent', ret)
			if (this.tabBar && this.tabBar.list && this.tabBar.list.length > 0){
                if (this.selected>=0){
                    this.tbs_SwitchTab(this.selected)
                }else{
                    this.tbs_SwitchTab(0)
                }             
            } 
            this.heightBottom = `calc(${navigationBarHeight}px + env(safe-area-inset-bottom))`
            
		},
        
        watch: {
            value: {
                handler: function observer(val) {
                    this.selected = val
                },
                immediate: true
            }
        },
		methods: {
			tbs_SwitchTab(e) {
				this.selected = e
				this.$emit('tabBarChangeEvent', {
					selected: e
				})
                this.$emit('input', this.selected)
			}
		}
	}
</script>

<style scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		display: flex;
        box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
        z-index: 9999;
	}

	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0.33);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		transform: scaleY(0.5);
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
        position: relative;
	}

	.tab-bar-item .cover-image {
		width: 45rpx;
		height: 45rpx;
	}

	.tab-bar-item .cover-view {
		font-size: 10px;
	}
    
    .messageTag{
        position: absolute;
        left: 55%;
        bottom: 50rpx;
        min-width: 36rpx;
        padding: 0 ;
        height: 36rpx;
        background-color: #ff4547;
        border-radius: 18rpx;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #ffffff;
        line-height: 36rpx;
        text-align: center;
        border: 1px solid #FFFFFF;
        box-sizing: content-box;
        /* margin-bottom: env(safe-area-inset-bottom); */
    }
</style>
